<template>
  <div id="personal" >
    <el-menu
   
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1"  style="padding-right: 4%;">
        <router-link to="/personal">我的e购 </router-link>
      </el-menu-item>
      <el-menu-item index="2" style="padding-right: 4%;">
        <router-link to="/personal/order">我的订单</router-link>
      </el-menu-item>
      <el-menu-item index="3" style="padding-right: 4%;">
        <router-link to="/personal/evaluate">我的评价</router-link>
      </el-menu-item>
      <el-menu-item index="4" style="padding-right: 4%;">
        <router-link to="/personal/return">退款管理</router-link>
      </el-menu-item>
      <el-menu-item index="5" style="padding-right: 4%;">
        <router-link to="/personal/favorite">我的喜欢</router-link>
      </el-menu-item>
      <el-menu-item index="6" style="padding-right: 4%;">
        <router-link to="/personal/footprint">我的足迹</router-link>
      </el-menu-item>
      <el-menu-item index="7" style="padding-right: 4%;">
        <router-link to="/personal/sell">订单管理</router-link>
      </el-menu-item>
      <el-menu-item index="8" style="padding-right: 4%;">
        <router-link to="/personal/user">我的账号</router-link>
      </el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1"
    };
  },
  mounted(){
    this.EventBus.$on("active", (index) => {
      this.activeIndex = index+"";
    });
  },
  methods: {
    handleSelect(key, keyPath) {}
  }
};
</script>

<style scoped>
#personal {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: block;
  margin-bottom: 50px;
}
.el-menu.el-menu--horizontal {
  width: 1080px;
}
.el-menu-demo {
  margin: 0 auto;
}
.el-menu-item {
  padding: 0 30px;
}
</style>


